/* 列表组件 */
<template>
  <div class="product-list">
    <div class="title"><img src="../../images/product.jpg" alt=""></div>
    <div class="list">
      <div class="product-card" v-for="item in productList" :key="item.id">
        <div class="picture">
          <!-- // 电影 -->
          <img v-if="item.type === 'move'" @click="toMove(item.id,item)" v-lazy="baseUrl + item.imgUrl" alt="">
          <!-- 周边 -->
          <img v-else-if="item.type === 'around'" @click="toAround(item.id,item)" v-lazy="baseUrl + item.imgUrl" alt="">
          <!-- 演出 -->
          <img v-else  @click="toDetails(item.id, item)" v-lazy="baseUrl + item.imgUrl" alt="">
        </div>
        <p>{{item.name}}</p>
        <div class="price">
          <div class="left">
            ￥<span>{{item.price}}</span>
          </div>
          <div class="right">
            <div class="add-cart" @click="addCart(item.id)"><van-icon name="shopping-cart-o" color="#ffffff" size="0.9rem"/></div>
            <!-- <div class="buy" @click="buy(item)">购买</div> -->
          </div>    
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import { getProductInfo } from '../../apis/indexApi'
    import { addOrder } from "../../apis/cartApi";
    import { myAddress } from "../../apis/meApi"

  export default {
    data(){
        return{
            baseUrl:'http://10.7.162.81:15666'
        }
    },
    
    props:{
      productList:{
        type:Array,
        required:true
      }
    },
    methods: {
      // 添加购物车
      addCart(id){
          let product = this.productList.find(item => item.id === id)
          let data = {
              userId: this.$store.getters['common/user'].id, 
              price: product.price, 
              id: product.id, 
              time: new Date(), 
              count: 1, 
              name: product.name, 
              detailaddress: '无', 
              bgUrl: product.imgUrl
          }
          getProductInfo(data).then(resolve => {
              if(resolve.code === 200){
                  this.$toast('加入购物车成功');
              }else{
                  this.$toast('加入购物车失败');
              }
          })
      },
      // 电影详情
      toMove(id,item){
        this.$router.push({
          name:'move',
          params:{
            id,
            item
          }
        })
      },
      toAround(id,item){
         this.$router.push({
            name:'around',
            params:{
              id,
              item
            }
         })
      },
      toDetails(id,item){
         this.$router.push({
            name:'details',
            params:{
              id,
              item
            }
         })
      },


      
     
    }
  }
</script>

<style lang="less" scoped>
  .product-list{
            width: 100%;
            background-color: rgb(246,246,246);
            .title{
                text-align: center;
                height: 24px;
                margin: 20px 0px;
                img{
                    width: 34%;
                }
            }
            .list{
                width: 100%;
                padding: 0px 14px;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                .product-card{
                    width: 48%;
                    height: 220px;
                    padding: 0 10px;
                    border-radius: 8px;
                    background-color: white;
                    flex-shrink: 0;
                    margin-bottom: 14px;
                    .picture{
                        width: 100%;
                        height: 66%;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    p{
                        height: 10%;
                        font-size: 0.85rem;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        margin: 7px 0px;
                    }
                    .price{
                        height: 15%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .left{
                            font-size: 0.6rem;
                            color: rgb(255,43,89);
                            span{
                                font-size: 0.85rem;   
                            }
                        }
                        .right{
                            display: flex;
                            height: 75%;
                            .add-cart{
                                width: 30px;
                                height: 25px;
                                text-align: center;
                                line-height: 25px;
                                border-top-left-radius: 15px;
                                border-bottom-left-radius: 15px;
                                background-color: rgb(247, 168, 3);
                            }
                            .buy{
                                width: 30px;
                                height: 25px;
                                text-align: center;
                                line-height: 25px;
                                font-size: 0.5rem;
                                border-top-right-radius: 15px;
                                border-bottom-right-radius: 15px;
                                background-color: rgb(255,25,13);
                                color: #fff;
                            }
                        }   
                    }
                }
            }
        }
</style>